<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">
       
    </ul>

    <script src="../../5.jQuery/jquery2107/jquery/jquery-1.12.4.min.js"></script>
    <script>
        /* 
        回调地狱或者称为地狱回调或者叫异步回调问题
        */
        // http://localhost:5000/testAjax  get
        let str = '';
        $.ajax({
            method:'get',
            url:'http://localhost:5000/testAjax',
            success:function(data){
                console.log(data);
                // 渲染页面
               for(let i=0;i<data.length;i++){
                   str+=`<li>${data[i].name}</li>`;
               }
               console.log(str);
               console.log($('.list'));
               $('.list').html(str);
            // 将数据渲染到页面
                //当姓名在页面上渲染后，我点击sonxinlei,再次发送ajax请求
                console.log($('.list>li').eq(0));
                $('.list>li').eq(0).click(()=>{
                    console.log('xx');
                    // 再次发送ajax
                    $.ajax({
                        method:'get',
                        url:'http://localhost:5000/testAjax',
                        success:function(data){
                            console.log(data);
                            // 获取数据 进行渲染  有需求的话仍然要在渲染的数据上绑定事件

                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                })
            },
            error:function(err){
                console.log(err);
            }
        })
    </script>
</body>
</html>